<template>
  <div>
    <base-table
      :tableData="roleList"
      :page.sync="pageQuery"
      :cols="roleTableColumn"
      v-loading="tableLoading"
      element-loading-text="加载中"
    >
      <template v-slot:header>
        <div class="header">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="addRoleDialogVisible = true"
            >新增角色</el-button
          >
          <el-input
            placeholder="请输入角色名"
            @input="fetchData"
            v-model.trim="pageQuery.roleName"
            class="handle-input mr10"
          >
            <template #append>
              <el-button @click="fetchData"> 搜索 </el-button>
            </template>
          </el-input>
        </div>
      </template>
      <template v-slot:operation>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="text" @click="openEditRoleDialog(scope.row)"
              >编辑</el-button
            >
            <!-- <el-button type="text" @click="removeRole(scope.row.pkid)">删除</el-button> -->
          </template>
        </el-table-column>
      </template>
    </base-table>
    <el-dialog
      title="新增角色信息"
      :visible.sync="addRoleDialogVisible"
      width="30%"
      @closed="handleAddRoleDialogClosed"
      :close-on-click-modal="false"
    >
      <el-form
        ref="addRoleFormRef"
        :model="addRoleForm"
        label-width="80px"
        :rules="roleFormRules"
      >
        <el-form-item label="角色名" prop="roleName">
          <el-input v-model="addRoleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="addRoleForm.roleDesc"></el-input>
        </el-form-item>
        <!-- <el-form-item label="角色授权">
          <el-tree
            :data="permissionList"
            ref="addRoleTree"
            @node-click="handleNodeClick"
            show-checkbox
            node-key="id"
            :default-expand-all="true"
            :props="defaultProps"
          >
          </el-tree>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addRoleDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmAddRole">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      title="编辑角色信息"
      :visible.sync="editRoleDialogVisible"
      width="30%"
      @closed="handleEditRoleDialogClosed"
      :close-on-click-modal="false"
    >
      <el-form
        ref="editRoleFormRef"
        :model="editRoleForm"
        label-width="80px"
        :rules="roleFormRules"
      >
        <el-form-item label="角色名" prop="roleName">
          <el-input v-model="editRoleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="editRoleForm.roleDesc"></el-input>
        </el-form-item>
        <!-- <el-form-item label="角色授权" prop="permissionList">
          <el-tree ref="editRoleTree" :data="permissionList" show-checkbox node-key="id" :default-expand-all="true" :props="defaultProps"> </el-tree>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editRoleDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmEditRole">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import baseTable from './compoents/baseTable.vue'
import { getRoleList, deleteRole, updateRole, addRole } from '@/api/role'
export default {
  name: 'auth',
  components: {
    baseTable,
  },
  data() {
    return {
      roleList: [],
      pageQuery: {
        pageSize: 10,
        pageIndex: 1,
        total: 0,
        roleName: '',
      },
      roleTableColumn: [
        {
          prop: 'roleName',
          label: '角色名',
        },
        {
          prop: 'remark',
          label: '角色描述',
        },
        {
          prop: 'createDate',
          label: '创建时间',
        },
        {
          prop: 'updateDate',
          label: '更新时间',
        },
      ],
      tableLoading: false,
      addRoleDialogVisible: false,
      addRoleForm: {
        roleName: '',
        roleDesc: '',
        rolePermissions: [],
      },
      roleFormRules: {
        roleName: [
          {
            required: true,
            message: '请输入角色名',
            trigger: ['blur', 'change'],
          },
        ],
      },
      editRoleDialogVisible: false,
      editRoleForm: {
        roleName: '',
        roleDesc: '',
        rolePermissions: [],
      },
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  methods: {
    fetchData() {
      this.tableLoading = true
      // 清空列表
      // this.roleList.length = 0;
      getRoleList(this.pageQuery).then((res) => {
        this.pageQuery.total = res.data.total
        // res.data.list.forEach((item) => {
        //   this.roleList.push(item);
        // });
        this.roleList = res.data.list
        this.tableLoading = false
      })
    },
    openEditRoleDialog(row) {
      this.editRoleDialogVisible = true
      this.editRoleForm.roleName = row.roleName
      this.editRoleForm.roleDesc = row.remark
      this.editRoleForm.pkid = row.pkid
    },
    handleAddRoleDialogClosed() {
      console.log('1 :>> ', 1)
      this.$refs.addRoleFormRef.resetFields()
    },
    handleEditRoleDialogClosed() {
      this.$refs.editRoleFormRef.resetFields()
    },
    confirmAddRole() {
      this.$refs.addRoleFormRef.validate((valid) => {
        if (valid) {
          const data = {
            roleName: this.addRoleForm.roleName,
            remark: this.addRoleForm.roleDesc,
          }
          console.log('data :>> ', data)
          addRole(data).then((res) => {
            if (res.success) {
              this.$message.success({
                message: '添加成功',
                type: 'success',
              })
              this.addRoleDialogVisible = false
              this.fetchData()
            }
          })
        }
      })
    },
    confirmEditRole() {
      this.$refs.editRoleFormRef.validate((valid) => {
        if (valid) {
          const data = {
            roleName: this.editRoleForm.roleName,
            remark: this.editRoleForm.roleDesc,
          }
          const id = this.editRoleForm.pkid
          updateRole(id, data).then((res) => {
            if (res.success) {
              this.$message.success({
                message: '编辑成功',
                type: 'success',
              })
              this.editRoleDialogVisible = false
              this.fetchData()
            } else {
              this.$message.error({
                message: '编辑失败',
                type: 'error',
              })
            }
          })
        }
      })
    },
    removeRole(pkid) {
      this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteRole(pkid).then((res) => {
            if (res.success) {
              this.fetchData()
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    pageQuery: {
      handler: function (newVal, oldVal) {
        if (newVal.pageIndex !== 1 && newVal.pageIndex === oldVal.pageIndex) {
          this.pageQuery.pageIndex = 1
        } else {
          this.fetchData()
        }
      },
      deep: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  margin: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
}
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 200px;
}

.handle-input {
  width: 300px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.mr10 {
  margin-right: 10px;
}
</style>
